<template>
  <div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="info"
        size="medium"
        label-width="135px"
        style="max-width: 1200px"
      >
        <el-col :span="12">
          <el-form-item label="HTTP 端口" prop="HTTP">
            <el-input
              v-model="info.HTTP"
              placeholder="请输入HTTP 端口"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="HTTPS 端口" prop="HTTPS">
            <el-input
              v-model="info.HTTPS"
              placeholder="请输入HTTPS 端口"
              :style="{ width: '100%' }"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备管理 端口" prop="DEV_MANAGE">
            <el-input
              v-model="info.DEV_MANAGE"
              placeholder="请输入设备管理 端口"
              disabled
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="RTSP 端口" prop="RTSP">
            <el-input
              v-model="info.RTSP"
              placeholder="请输入RTSP 端口"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="RTMP 端口" prop="RTMP">
            <el-input
              v-model="info.RTMP"
              placeholder="请输入RTMP 端口"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button
              type="primary"
              size="medium"
              style="width: 120px"
              @click="submitForm"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {getNetworkPortApi } from "@/api/network";
export default {
  props: {
  },
  data() {
    return {
      info: {},
      data:[],
    };
  },
  created() {},
  mounted () {
    this.getBaseInfo();
  },
  methods: {
    submitForm () {
      console.log(this.info);
      this.$message.success('保存成功');
    },
    getBaseInfo () {
      getNetworkPortApi().then((res) => {
        this.data = res;
        if (this.data) {
          for(let v of this.data) {
            Object.keys(v).forEach(item => {
              if (item == 'sProtocol') {
                // console.log(v['name'],v['value']);
                this.$set(this.info,v['sProtocol'],v['iPortNo']);
              }
            })
          }
        } else {
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>